<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Data Display</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- 引入jQuery库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- 引入Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .sidebar {
            width: 200px;
            height: 100vh;
            background-color: #f2f2f2;
            position: fixed; /* 将导航栏固定定位 */
            top: 0; /* 从顶部开始固定 */
            left: 0; /* 从左侧开始固定 */
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar li {
            padding: 10px;
            cursor: pointer;
        }
        .sidebar li:hover {
            background-color: #e6e6e6;
        }
        .table th,
        .table td {
            padding: 10px;
            border: 1px solid #ccc;
        }

        .table th {
            width: 150px;
            background-color: #f2f2f2;
        }

        .table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .table tbody tr:hover {
            background-color: #e6e6e6;
        }
        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .container h1 {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <ul>
        <li onclick="loadPage('用户')">用户</li>
        <li onclick="loadPage('订单')">订单</li>
        <li onclick="loadPage('民宿')">民宿</li>
    </ul>
</div>

<div id="content" class="container">
    <h1>用户</h1>
    <form id="usernameSelect">
        <label for="usernameInput">筛选用户名:</label>
        <input type="text" id="usernameInput" name="usernameInput">
        <button type="submit">筛选</button>
    </form>
    <table id="userTable" class="table">
        <thead>
        <tr>
            <th>用户ID</th>
            <th>电话</th>
            <th>密码</th>
            <th>用户名</th>
            <th>性别</th>
            <th>生日</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <table id="orderTable" class="table">
        <thead>
        <tr>
            <th>订单号</th>
            <th>民宿ID</th>
            <th>用户ID</th>
            <th>用户评价</th>
            <th>时间</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <table id="accommodationTable" class="table">
        <thead>
        <tr>
            <th>民宿ID</th>
            <th>价格</th>
            <th>地点</th>
            <th>状态</th>
            <th>配置ID</th>
            <th>图片</th>
            <th>民宿名</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<!-- 模态框 -->
<div id="editUserModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- 模态框内容 -->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">编辑用户信息</h4>
            </div>
            <div class="modal-body">
                <!-- 用户信息表单 -->
                <form id="editUserForm"  method="post">
                    <input type="hidden" id="userId" name="userId">
                    <div class="form-group">
                        <label for="phoneNumber">手机号码:</label>
                        <input type="text" class="form-control"  id="phoneNumber" name="phoneNumber" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码:</label>
                        <input type="text" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="username">用户名:</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="gender">性别:</label>
                        <select class="form-control" id="gender" name="gender" required>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="birthday">生日:</label>
                        <input type="date" class="form-control" name="birthday" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary" onclick="updateUser(event)">保存</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
<div id="editOrderModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- 模态框内容 -->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">订单详情</h4>
            </div>
            <div class="modal-body">
                <!-- 订单详细信息表单 -->
                <form id="editOrderForm" method="post">
                    <div class="form-group">
                        <label for="orderId">订单号:</label>
                        <input type="text" class="form-control" id="orderId" name="orderId" readonly>
                    </div>
                    <div class="form-group">
                        <label for="roomId2">民宿ID:</label>
                        <input type="text" class="form-control" id="roomId2" name="roomId2" readonly>
                    </div>
                    <div class="form-group">
                        <label for="userId2">用户ID:</label>
                        <input type="text" class="form-control" id="userId2" name="userId2" readonly>
                    </div>
                    <div class="form-group">
                        <label for="rating">用户评价:</label>
                        <textarea class="form-control" id="rating" name="rating"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="time">时间:</label>
                        <input type="text" class="form-control" id="time" name="time" readonly>
                    </div>
                    <div class="form-group">
                        <label for="price">价格:</label>
                        <input type="text" class="form-control" id="price" name="price">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" onclick="updateOrder(event)">保存</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>





<script>
    $(document).ready(function() {
        // 默认加载用户表
        loadPage('用户');
    });

    function loadPage(page) {
        // 清空表格内容
        $("#userTable tbody").empty();
        $("#orderTable tbody").empty();
        $("#accommodationTable tbody").empty();

        if (page === '用户') {
            // 发送 AJAX 请求获取用户列表
            $.ajax({
                url: "/selectUser",
                method: "GET",
                dataType: "json",
                success: function(response) {
                    $("#orderTable").hide();
                    $("#accommodationTable").hide();
                    $("#userTable").show();
                    $("#usernameSelect").show();
                    if (response && response.length > 0) {
                        var users = response;
                        // 遍历用户列表，格式化生日信息并构建表格内容
                        var tableBody = $("#userTable tbody");
                        for (var i = 0; i < users.length; i++) {
                            var user = users[i];
                            var formattedBirthday = moment(user.birthday).format("YYYY-MM-DD");
                            var row = "<tr>" +
                                "<td>" + user.userId + "</td>" +
                                "<td>" + user.phoneNumber + "</td>" +
                                "<td>" + user.password + "</td>" +
                                "<td>" + user.username + "</td>" +
                                "<td>" + user.gender + "</td>" +
                                "<td>" + formattedBirthday + "</td>" +
                                "<td class='table-actions'>" +
                                "<button onclick='editUser(" + user.userId + ")'>更改</button>" +
                                "<button onclick='deleteUser(" + user.userId + ")'>删除</button>" +
                                "</td>" +
                                "</tr>";
                            tableBody.append(row);
                        }
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        } else if (page === '订单') {
            // 发送 AJAX 请求获取订单列表
            $.ajax({
                url: "/selectOrder",
                method: "GET",
                dataType: "json",
                success: function(response) {
                    $("#orderTable").show();
                    $("#accommodationTable").hide();
                    $("#userTable").hide();
                    $("#usernameSelect").hide();
                    if (response && response.length > 0) {
                        var orders = response;
                        // 遍历订单列表，格式化日期信息并构建表格内容
                        var tableBody = $("#orderTable tbody");
                        for (var i = 0; i < orders.length; i++) {
                            var order = orders[i];
                            var formattedDate = moment(order.time).format("YYYY-MM-DD HH:mm");
                            var row = "<tr>" +
                                "<td>" + order.orderId + "</td>" +
                                "<td>" + order.roomId + "</td>" +
                                "<td>" + order.userId + "</td>" +
                                "<td>" + order.rating + "</td>" +
                                "<td>" + formattedDate + "</td>" +
                                "<td>" + order.price + "</td>" +
                                "<td class='table-actions'>" +
                                "<button onclick='editOrder(" + order.orderId + ")'>更改</button>" +
                                "<button onclick='deleteOrder(" + order.orderId + ")'>删除</button>" +
                                "</td>" +
                                "</tr>";

                            tableBody.append(row);
                        }
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }
        else if(page === '民宿'){
            $.ajax({
                url: "/selectAccommodation",
                method: "GET",
                dataType: "json",
                success: function(response) {
                    $("#orderTable").hide();
                    $("#userTable").hide();
                    $("#usernameSelect").hide();
                    $("#accommodationTable").show();
                    if (response && response.length > 0) {
                        var accommodations = response;
                        // 遍历订单列表，格式化日期信息并构建表格内容
                        var tableBody = $("#accommodationTable tbody");
                        for (var i = 0; i < accommodations.length; i++) {
                            var accommodation = accommodations[i];
                            var row = "<tr>" +
                                "<td>" + accommodation.roomId+ "</td>" +
                                "<td>" + accommodation.price + "</td>" +
                                "<td>" + accommodation.location + "</td>" +
                                "<td>" + accommodation.status + "</td>" +
                                "<td>" + accommodation.configurationId + "</td>" +
                                "<td><img src='" + accommodation.imageUrl + "' alt='User Image' width='150px'></td>" +
                                "<td>" + accommodation.roomName + "</td>" +
                                "<td class='table-actions'>" +
                                "<button onclick='editAccommodation(" + accommodation.roomId + ")'>更改</button>" +
                                "<button onclick='deleteAccommodation(" + accommodation.roomId + ")'>删除</button>" +
                                "</td>" +
                                "</tr>";

                            tableBody.append(row);
                        }
                    }
                },
                error: function(error) {
                    console.log(error);
                }
            });
        }

        // 更新页面标题
        $("#content h1").text(page);
    }

    function editUser(userId) {
        $.ajax({
            url: "/getUserById?userId="+userId,
            method: "GET",
            dataType: "json",
            success: function(response) {
                var user = response;
                $("#userId").val(user.userId);
                $("#phoneNumber").val(user.phoneNumber);
                $("#password").val(user.password);
                $("#username").val(user.username);
                $("#gender").val(user.gender);
                $("#birthday").val(moment(user.birthday).format("YYYY-MM-DD"));
                // 打开模态框
                $("#editUserModal").modal("show");

            },
            error: function(error) {
                console.log(error);
            }
        });


        console.log("Edit User: " + userId);
    }

    function updateUser(event){
        event.preventDefault(); // 阻止表单的默认提交行为

        // 获取表单数据
        var formData = new FormData(document.getElementById('editUserForm'));

        // 发送Ajax请求
        fetch('/updateUser', {
            method: 'POST',
            body: formData
        })
            .then(function(response) {
                if (response.ok) {
                    // 处理成功响应
                    console.log('User updated successfully.');
                    $("#editUserModal").modal("hide");
                    loadPage("用户");
                } else {
                    // 处理错误响应
                    console.error('Failed to update user.');
                }
            })
            .catch(function(error) {
                // 处理请求发生的错误
                console.error('Failed to send update request.', error);
            });
    }

    function deleteUser(userId) {
        // 删除用户逻辑
        // 发送Ajax请求
        fetch('/deleteUserById?userId='+userId, {
            method: 'POST',
        })
            .then(function(response) {
                if (response.ok) {
                    // 处理成功响应
                    console.log("Delete User: " + userId);
                    loadPage("用户");
                } else {
                    // 处理错误响应
                    console.error('Failed to delete user.');
                }
            })
            .catch(function(error) {
                // 处理请求发生的错误
                console.error('Failed to send delete request.', error);
            });
        console.log("Delete User: " + userId);
    }

    function editOrder(orderId) {
        // 编辑订单逻辑
        $.ajax({
            url: "/getOrderById?orderId="+orderId,
            method: "GET",
            dataType: "json",
            success: function(response) {
                var order = response;
                console.log(response);
                $("#orderId").val(order.orderId);
                $("#roomId2").val(order.roomId);
                $("#userId2").val(order.userId);
                $("#rating").val(order.rating);
                $("#time").val(moment(order.time).format("YYYY-MM-DD HH:mm"));
                $("#price").val(order.price);

                // 打开模态框
                $("#editOrderModal").modal("show");
            },
            error: function(error) {
                console.log(error);
            }
        });

        console.log("Edit Order: " + orderId);
    }

    function updateOrder(event){
        event.preventDefault(); // 阻止表单的默认提交行为

        // 获取表单数据
        var formData = new FormData(document.getElementById('editOrderForm'));

        // 发送Ajax请求
        fetch('/updateOrder', {
            method: 'POST',
            body: formData
        })
            .then(function(response) {
                if (response.ok) {
                    // 处理成功响应
                    console.log('User updated successfully.');
                    $("#editOrderModal").modal("hide");
                    loadPage("订单");
                } else {
                    // 处理错误响应
                    console.error('Failed to update user.');
                }
            })
            .catch(function(error) {
                // 处理请求发生的错误
                console.error('Failed to send update request.', error);
            });
    }

    function deleteOrder(orderId) {
        // 删除订单逻辑
        console.log("Delete Order: " + orderId);
    }

    function editAccommodation(orderId) {
        // 编辑订单逻辑
        console.log("Edit Order: " + orderId);
    }

    function deleteAccommodation(orderId) {
        // 删除订单逻辑
        console.log("Delete Order: " + orderId);
    }
</script>
<script>
    // 监听用户表单
    document.getElementById('usernameSelect').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为

        // 获取筛选关键词
        var filterKeyword = document.getElementById('usernameInput').value;

        // 发送Ajax请求进行筛选
        $.ajax({
            url: "/selectUserByKey?Key="+filterKeyword,
            method: "POST",
            dataType: "json",
            success: function(response) {
                $("#userTable tbody").empty();
                if (response && response.length > 0) {
                    var users = response;
                    // 遍历用户列表，格式化生日信息并构建表格内容
                    var tableBody = $("#userTable tbody");
                    for (var i = 0; i < users.length; i++) {
                        var user = users[i];
                        var formattedBirthday = moment(user.birthday).format("YYYY-MM-DD");
                        var row = "<tr>" +
                            "<td>" + user.userId + "</td>" +
                            "<td>" + user.phoneNumber + "</td>" +
                            "<td>" + user.password + "</td>" +
                            "<td>" + user.username + "</td>" +
                            "<td>" + user.gender + "</td>" +
                            "<td>" + formattedBirthday + "</td>" +
                            "<td class='table-actions'>" +
                            "<button onclick='editUser(" + user.userId + ")'>更改</button>" +
                            "<button onclick='deleteUser(" + user.userId + ")'>删除</button>" +
                            "</td>" +
                            "</tr>";
                        tableBody.append(row);
                    }
                }
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
</script>
</body>
</html>